// 类组件的书写
// 1. 首字母要大写
// 2. 类必须继承自 React.Component
// 3. 必须有render函数，返回jsx，也可以返回null
import React, {useState} from 'react'
class AButton extends React.Component {
  state ={
    count:1
  }
  add = () =>{
    // 要想修改了变量，js和页面同步更新的话，必须使用类组件专属的方法 setState
    // setState核心就是 重新调用了render函数，更新了页面渲染
    this.setState({count: this.state.count+1})
  }
  render(){
    return(
     <div>
       <h3>类组件--{this.state.count}</h3>
       <button onClick={this.add}>类组件按钮+1</button>
     </div>
    )
  }
}
// 在react v16.8以前， 类组件也叫有状态组件(就是可以更新数据)， 函数组件也叫无状态组件（里面不能更新页面
function Header(){
  // 下面是普通变量
  let count = 1
  const add = () =>{
    count++
    console.log(count) // 只能更新本地js数据，页面不会更新
  }
  return(
    <div>
      <h3>函数组件--{count}</h3>
      <button onClick={add}>函数组件按钮+1</button>
    </div>
  )
}
// 下面组件就是利用了react 16.8+ 的api 专属的hooks  useState
function Footer(){
  // 下面定义的count变量就是 状态变量，和普通变量的区别就是 状态变量的更改可以更新页面。也就是数据驱动视图
  // useState是react提供的一个内置的hooks，专门用来创建变量和修改变量的方法的
  // 有了hooks我们的函数组件，也可以有状态了，所以和class组件的区别很小了
  const [count, setCount] = useState(1)
  return(
    <div>
      <h3>函数组件，用了hooks----{count}</h3>
      <button onClick={() => setCount(count+1)}>useState修改数据</button>
    </div>
  )
}
function App(){
  return(
    <div>
      <Header/>
      <Footer/>
      <AButton/>
    </div>
  )
}
export default App